<template>
  <el-dialog v-model="dialogVisible" width="800px" append-to-body>
    <Title title="分组教师列表" />
    <div class="dialog-container">
      <el-table :data="teacherList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="teachId" label="工号" align="center" width="120" />
        <el-table-column prop="user.nickName" label="姓名" align="center" width="120" />
        <el-table-column prop="majorField" label="研究方向" align="center" min-width="180" />
        <el-table-column prop="status" label="状态" align="center" width="80">
          <template #default="{ row }">
            <el-tag :type="row.status === '0' ? 'success' : 'danger'">
              {{ row.status === '0' ? '正常' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close" class="defauleButton">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import Title from '@/components/Title'

const dialogVisible = ref(false)
const teacherList = ref([])

const openDialog = (teachers) => {
  teacherList.value = teachers || []
  dialogVisible.value = true
}

const close = () => {
  dialogVisible.value = false
}

defineExpose({ openDialog })
</script>
